const path = require("path");

const {
  override,
  addWebpackAlias, // 用于配置别名的
  addLessLoader, // 用于加载less文件
  addDecoratorsLegacy, // 用于使用ES的装饰器
  fixBabelImports, // antd 按需加载
  overrideDevServer, // 开发服务器
} = require("customize-cra");

/**
 * 代理配置
 *
 * add proxy 本置代理
 * 返回一个回调函数，customize-cra在执行这个回调的时候，会将当前的开发服务器的配置项以参数的形式传给我们
 * 我们对这个config进行一个简单的处理后返回给customize-cra
 */
const addProxy = () => (config) => {
  // 返回配置好的config
  return {
    ...config,
    // 代理
    proxy: {
      // 拦截器（拦截所有以"/api"开头的http请求）
      "/app": {
        // 配置一个base url
        target: "http://data.fenotes.com/mock/608e03fd4025392aa6750b8f",
        // 是否修改源，他决定我们是否跨源
        //http://localhost:3000 => target
        changeOrigin: true,
        // 是否重写我们的拦截关键字
        pathRewrite: {
          "^/app": "/api",
        },
      },
      "/api": {
        // 配置一个base url
        target: "http://data.fenotes.com/mock/608e03fd4025392aa6750b8f",
        // 是否修改源，他决定我们是否跨源
        //http://localhost:3000 => target
        changeOrigin: true,
        // 是否重写我们的拦截关键字
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  };
};
// process.env.PORT = 8080;
module.exports = {
  webpack: override(
    // 使用修饰器
    addDecoratorsLegacy(),
    // 加载less文件
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true,
      },
      sourceMap: true,
    }),
    // antd按需加载工具, 具体用法参考以下链接
    // https://github.com/ant-design/babel-plugin-import
    fixBabelImports("import", {
      libraryName: "antd-mobile",
      style: "css",
    }),
    // 路径别名
    addWebpackAlias({
      "@": path.resolve(__dirname, "src"),
    })
  ),
  // 开发环境服务器代理, 一般情况下不需要我们自己配
  devServer: overrideDevServer(addProxy()),
};
